cards: Update all product cards to use new/updated fields #411

creotutar · 2020-10-23T03:49:16Z

The product card needs to use subfields with a different format. Because
the details can have rich text, we stop escaping the details.

We add a new tag element to the prominentimage tag. This should show if
the stock status of the Product entity is present and not "In Stock".
This is a hardcoded value for now, as we get a string from the backend.

The tag should be in the top left corner, only take up 75% of the image
if it is long and should be sourced by two new --hh level css variables.

Tag should be commented out by default.

J=SLAP-696
TEST=manual

Test the styling changes in IE11.

Test on a local repository that a card using the product-standard and
product-prominentimage cards shows all expected data.

For example, if you search "Bouquet of Roses" on the Slapshot test
account and look at the Products vertical, you should see an image, a
price, and a description with the correct rich text formatting.

cards/multilang-product-prominentimage/component.js

rosiegrant · 2020-10-23T15:41:28Z

@creotutar I realized I missed this -- because we're using rich text now, for the product cards we should comment out the showMore stuff by default, like we do for the accordion card:

      // showMoreDetails: {
      //   showMoreLimit: null, // Character count limit
      //   showMoreText: '', // Label when toggle will show truncated text
      //   showLessText: '' // Label when toggle will hide truncated text
      // },

cards/product-prominentimage/component.js

cards/multilang-product-prominentimage/component.js

alexisgrow · 2020-10-26T18:49:24Z

cards/multilang-product-prominentimage/component.js

+    }
+
+    let tag;
+    if (profile.stockStatus && profile.stockStatus !== 'In Stock') {


Will "In Stock" be translated for other languages/locales?

Really good point, finding that enums aren't translated in backend, will probably keep this hardcoded conditional but need a solution for translating tag copy, waiting on Rose

cards/multilang-product-prominentimage/template.hbs

creotutar · 2020-10-27T07:34:35Z

This will not be part of 1.17 and so must wait on being merged to develop

alexisgrow

this lgtm!

cards/multilang-product-prominentimage/component.js

creotutar · 2020-11-10T14:52:34Z

TODO: change alt text too

The product card needs to use subfields with a different format. Because the details can have rich text, we stop escaping the details. J=SLAP-696 TEST=manual Test on a local repository that a card using the product-standard and product-prominentimage cards shows all expected data. For example, if you search "Bouquet of Roses" on the Slapshot test account and look at the Products vertical, you should see an image, a price, and a description with the correct rich text formatting.

We add a new tag element to the prominentimage tag. This should show if the stock status of the Product entity is present and not "In Stock". This is a hardcoded value for now, as we get a string from the backend. The tag should be in the top left corner, only take up 75% of the image if it is long and should be sourced by two new --hh level css variables. Test the width changes in IE11.

tmeyer2115 · 2020-11-13T23:12:21Z

cards/multilang-product-prominentimage-clickable/component.js

+      image: imageUrl, // The URL of the image to display on the card
+      altText: alternateText,  // The alternate text for the image
+      details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', '_top') : null, // The text in the body of the card, Warning: cannot contain links
+      // tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card


Do we want this commented out by default? Do we need weight in the card(s)?

re: Commented out, yes according to spec
What do you mean by weight?

tmeyer2115 · 2020-11-13T23:14:51Z

cards/multilang-product-standard/component.js

      titleEventOptions: this.addDefaultEventOptions(),
      subtitle: price, // The sub-header text of the card
-      details: profile.description, // The text in the body of the card
+      details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', '_top') : null, // The text in the body of the card


Does this card need a tag (and weight) placeholder?

static/scss/answers/cards/product-prominentimage-clickable.scss

alexisgrow

this LGTM, though I left two questions ❓

cards/multilang-product-prominentimage-clickable/component.js

cards/multilang-product-prominentimage/component.js

oshi97 · 2020-11-13T23:38:54Z

cards/multilang-product-prominentimage-clickable/component.js

+    let price = '';
+    if (profile.c_price
+      && profile.c_price[0]
+      && profile.c_price[0].currency


not sure if somebody asked this already but do we need this check for currency? don't see it currency being used anywhere

Ah, need to change these fields to stop using the custom field and use the new field

## Version 1.17.0 Version 1.17.0 of the Theme supports the new Overlay integration. It also has a number of changes to support the new, built-in Product entity type. ### Changes - A new file, static/js/formatters-custom.js was added to the Theme. This file is where any custom formatters or overrides of built-in formatters, should live. (#448) - Single language cards now use the `toLocalizedDistance` formatter to properly format entity distance. (#449) - To better support WCAG, the iFrame integration now has a `title` attribute on the iFrame. (#451) - The Theme now allows a new type of Answers integration: the Overlay. This is one of the simplest integrations offered. Additional documentation on it can be found in the Hitchhiker training. - We upgraded the Theme to use Webpack v5. This will enable proper tree-shaking of bundle.js. (#463, #470) - A new card type was added: `product-prominentimage-clickable`. The card itself is clickable. (#466) - A new formatter was added: `Formatter.hoursList`. This formatter lists the hours for an entity for every day of the week. (#467) - To improve site performance, the `defer` attribute was added to all the SDK JS assets. (#473, #474) - Small updates were made to all the product cards to support the new, built-in Product entity type. (#411, #476) - A new formatter was added for prices: `Formatter.price`. (#472) - The `JAMBO_INJECTED_DATA` environment variable now includes the label of an experience's vertical. This label is used as the default vertical name in navigation, no results, and universal section title. (#490, 493) ### Bug Fixes - The post upgrade script now works correctly when the Theme has been imported as a submodule. (#441) - The `LocationStandard` card's styling was updated to be fully compatible with IE11. (#455) - A bug was fixed that caused the Theme's inline Javascript to be minified twice. By removing this bug, Webpack builds were made considerably more performant. (#461) - Fixes were made to ensure the `View Results` button for `CollapsibleFilters` is sticky. (#468, #469) - The logic for identifying absolute URLs in the HBS templates was corrected (#475) - The thumbnail selection logic in `Formatter.image` was incorrect. It was not properly selecting the smallest thumbnail greater than the provided threshold. This has been corrected. Note that this bug had an impact on page performance as unnecessarily large images were loaded on the page. (#471) - The `relativePath` computed by Jambo is now properly passed along to the Theme's cards. (#499)

creotutar commented Oct 23, 2020

View reviewed changes

cards/multilang-product-prominentimage/component.js Outdated Show resolved Hide resolved

creotutar marked this pull request as ready for review October 26, 2020 17:53

creotutar requested review from alexisgrow, tmeyer2115, oshi97, nanhu95 and cea2aj October 26, 2020 17:54

alexisgrow reviewed Oct 26, 2020

View reviewed changes

alexisgrow approved these changes Oct 27, 2020

View reviewed changes

oshi97 reviewed Oct 27, 2020

View reviewed changes

cards/multilang-product-prominentimage/component.js Show resolved Hide resolved

oshi97 force-pushed the develop branch from 8194fa5 to 9b9d51c Compare October 28, 2020 18:33

creotutar added 9 commits November 10, 2020 21:01

Hide show more details by default, because rich text description

158c930

Tag should be commented out by default

a633a0b

Keep the way we comment things out consistent

9ee9e7c

Fix consistent comment change for multilang cards

4ad353c

Null-check description so decription can be null as before

dd4fd23

Use fieldName richTextDescription and target top

490ecbb

Add $ for regular product cards, default strings to empty

be5b431

creotutar force-pushed the feature/use-new-product-fields branch from 1fd3081 to be5b431 Compare November 11, 2020 02:02

creotutar added 5 commits November 12, 2020 20:28

Add clickable card

972a7d5

Add variables to the default file

15a4c1d

Use new alt text field

4222a34

Remove special stock status logic as request from PM

ce75b9c

Remove $ for multilang clickable card

4221af7

creotutar requested a review from alexisgrow November 13, 2020 22:56

creotutar requested a review from oshi97 November 13, 2020 22:56

tmeyer2115 reviewed Nov 13, 2020

View reviewed changes

alexisgrow approved these changes Nov 13, 2020

View reviewed changes

cards/multilang-product-prominentimage-clickable/component.js Outdated Show resolved Hide resolved

cards/multilang-product-prominentimage/component.js Show resolved Hide resolved

Add comment for rtf showMoreDetails, remove interpolated string

6be8299

alexisgrow approved these changes Nov 13, 2020

View reviewed changes

oshi97 reviewed Nov 13, 2020

View reviewed changes

Use new price field, not c_price

62a137e

tmeyer2115 merged commit 72c51fc into develop Nov 16, 2020

tmeyer2115 deleted the feature/use-new-product-fields branch November 16, 2020 21:43

tmeyer2115 mentioned this pull request Dec 1, 2020

v1.17 #520

Merged

tmeyer2115 mentioned this pull request Dec 1, 2020

v1.17.0 #521

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

cards: Update all product cards to use new/updated fields #411

cards: Update all product cards to use new/updated fields #411

creotutar commented Oct 23, 2020 •

edited

Loading

rosiegrant commented Oct 23, 2020

alexisgrow Oct 26, 2020

creotutar Oct 27, 2020

creotutar commented Oct 27, 2020

alexisgrow left a comment

creotutar commented Nov 10, 2020

tmeyer2115 Nov 13, 2020

creotutar Nov 13, 2020

tmeyer2115 Nov 13, 2020

alexisgrow left a comment

oshi97 Nov 13, 2020

creotutar Nov 13, 2020

cards: Update all product cards to use new/updated fields #411

cards: Update all product cards to use new/updated fields #411

Conversation

creotutar commented Oct 23, 2020 • edited Loading

rosiegrant commented Oct 23, 2020

alexisgrow Oct 26, 2020

Choose a reason for hiding this comment

creotutar Oct 27, 2020

Choose a reason for hiding this comment

creotutar commented Oct 27, 2020

alexisgrow left a comment

Choose a reason for hiding this comment

creotutar commented Nov 10, 2020

tmeyer2115 Nov 13, 2020

Choose a reason for hiding this comment

creotutar Nov 13, 2020

Choose a reason for hiding this comment

tmeyer2115 Nov 13, 2020

Choose a reason for hiding this comment

alexisgrow left a comment

Choose a reason for hiding this comment

oshi97 Nov 13, 2020

Choose a reason for hiding this comment

creotutar Nov 13, 2020

Choose a reason for hiding this comment

creotutar commented Oct 23, 2020 •

edited

Loading